<template>
    <el-drawer class="el-drawer-html" v-model="isDrawerOpen" title="编辑文章" size="80%" :before-close="handleClose">
        <el-scrollbar height="100%">
            <article-form :FormArticle="FormArticle" :isDrawerOpenVule="isDrawerOpen" :is-drawer-open="isDrawerOpenFun"></article-form>
        </el-scrollbar>
    </el-drawer>
</template>
<script setup lang="ts">
import { ref, defineProps, defineEmits, watch, reactive, onMounted } from 'vue';
import articleForm from '@/components/form.vue';
const FormArticle = ref<any>({})
// 使用 defineProps 定义 props
const props = defineProps({
    isOpen: {
        type: Boolean,
        required: true, // 表示父组件必须传递该属性
    },
    article: {
        type: Object,
        required: true, // 表示父组件必须传递该属性
    }
});
const isDrawerOpen = ref<any>(props.isOpen);
// 监听 props.isOpen 的变化，更新 isDrawerOpen
watch(
    [() => props.article, () => props.isOpen],
    ([newArticle, newIsOpen]) => {
        // 处理 props.article 的变化
        console.log(newArticle, '+++++++++++=--article');
        FormArticle.value = newArticle;
        // 处理 props.isOpen 的变化
        isDrawerOpen.value = newIsOpen;
    },
    { immediate: true }
);
// 关闭抽屉
const emit = defineEmits(['handle-close']);
const handleClose = () => {
    isDrawerOpen.value = false;
    emit('handle-close', false);
}
const isDrawerOpenFun = (val: boolean) => {
    console.log(val, '+++++val');
    isDrawerOpen.value = val;
}
</script>
<style scoped></style>